<template>
  <view class="page-container">
    <!-- 顶部背景图和标题 -->
    <view class="header-section">
      <image src="/static/bg5.png" mode="aspectFill" class="header-bg"></image>
      <view class="header-title">青春留声</view>
    </view>
    
    <!-- 笔记本容器 -->
    <view class="notebook-container">
      <!-- 纸张背景 -->
      <view class="notebook-paper">
        <!-- 文字内容 -->
        <view class="notebook-text">
          <text class="notebook-line">我们终将跃入人海</text>
          <text class="notebook-line">各有风雨灿烂</text>
          <text class="notebook-line">愿此去繁花似锦</text>
          <text class="notebook-line">再相逢依旧如故</text>
          <text class="notebook-signature">— 成电</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
      // 3秒后跳转到index1.vue页面
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/index/index1'
        });
      }, 3000);
    },
  methods: {}
};
</script>

<style scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #135340;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.header-section {
  width: 100%;
  height: 350px;
  position: relative;
  margin-bottom: 0;
  z-index: 1;
}

.header-bg {
  width: 100%;
  height: 100%;
}

.header-title {
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 48rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  /* 添加黄色描边效果 */
  -webkit-text-stroke: 2rpx #FFD700;
  text-stroke: 2rpx #FFD700; /* 兼容标准语法 */
}

/* 笔记本容器样式 */
.notebook-container {
  width: 100%;
  margin-top: -120rpx;
  margin-bottom: 60rpx;
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 2;
}

/* 笔记本纸张 - 使用bg9.png作为背景 */
.notebook-paper {
  width: 90%;
  max-width: 750px;
  min-height: 450px;
  border-radius: 0 10rpx 10rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  background-image: url('/static/bg9.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

}

/* 文字内容 */
.notebook-text {
  padding: 150rpx 60rpx 80rpx;
  position: relative;
  z-index: 1;
  
  
}

.notebook-line {
  display: block;
  font-family: qiantuxianmoti; /* 确保这个字体已引入 */
  font-size: 40rpx;
  color: #333;
  margin-bottom: 30rpx;
  line-height: 1.5;
}

.notebook-signature {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
  text-align: right;
  font-style: italic;
}
</style>